<template>
    <div id="myMain">
        <div class="displayFlexR" style="flex:1;">
            <div class="approval_details_left myMain-padding">
                <el-form :inline="true" label-width="150px" :model="formData" class="demo-form-inline">
                    <div class="title baseBG">基本信息</div>
                    <div class="line baseBG"></div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="房屋编号：">
                                <el-input v-model="formData.houseNumber" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="区域：">
                                <el-input v-model="formData.region" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" v-if="IsRentRefund">
                            <el-form-item label="楼栋：">
                                <el-input v-model="formData.bname" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-else>
                            <el-form-item label="楼栋：">
                                <el-input v-model="formData.lname" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="楼层：">
                                <el-input v-model="formData.high" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                         <el-col :span="12">
                            <el-form-item label="单元号：">
                                <el-input v-model="formData.unit" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="面积：">
                                <el-input v-model="formData.area" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="朝向：">
                                <el-input v-model="formData.aspect" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="装修情况：">
                                <el-input v-model="formData.decorateType" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="是否有电梯：">
                                <el-input v-model="formData.elevator" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item label="单价/月：">
                                <el-input v-model="formData.rentType" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总额/年：">
                                <el-input v-model="formData.Mprice" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="title baseBG">企业信息</div>
                    <div class="line baseBG"></div>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业名称：">
                                <el-input v-model="formData.fname" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="IsRentRefund">
                            <el-form-item label="发起日期：">
                                <el-input v-model="formData.time" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-else>
                            <el-form-item label="发起日期：">
                                <el-input v-model="formData.creatTime" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业法人：">
                                <el-input v-model="formData.corp" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="三证合一：">
                                <a :href="formData.card" download="myFileName">
                                    <vxe-button><i class="vxe-icon--download"></i>  压缩包</vxe-button>
                                </a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="身份证：">
                                <el-input v-model="formData.nid" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="营业执照：">
                                <a :href="formData.charter" download="myFileName2">
                                    <vxe-button><i class="vxe-icon--download"></i>  压缩包</vxe-button>
                                </a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="联系方式：">
                                <el-input v-model="formData.phone" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="纳税人识别号：">
                                <el-input v-model="formData.alias" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业类型：">
                                <el-input v-model="formData.type" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业规模：">
                                <el-input v-model="formData.scale" disabled></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="12">
                            <el-form-item label="租赁时长：">
                                <el-input v-model="formData.leaseTime" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="IsRentRefund">
                       <el-col :span="24">
                            <el-form-item label="申请退租时间：">
                                <el-input v-model="formData.exitTime" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="lastRow" v-if="IsRentRefund">
                       <el-col :span="24">
                            <el-form-item label="退租说明：">
                                <el-input type="textarea" v-model="formData.explain" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="approval_details_right myMain-padding">
                <p class="baseBG hh">当前处理人： {{username}}</p>
                <el-radio-group v-model="checkList">
                    <el-radio label="同意"></el-radio>
                    <el-radio label="不同意"></el-radio>
                </el-radio-group>
                <p>处理意见：</p>
                <el-input type="textarea" v-model="textarea" rows="3" placeholder="请输入处理意见"></el-input>
                <p>处理流程：</p>
                <el-timeline>
                    <el-timeline-item :timestamp="formData.time" placement="top">
                    <el-card>
                        <p>发起人： {{formData.corp}}</p>
                    </el-card>
                    </el-timeline-item>
                </el-timeline>
                <div class="btn">
                    
                    <el-button v-if="IsRentRefund" class="baseBG" @click="RentRefundSubmit">确认</el-button>
                    <el-button v-else class="baseBG" @click="submit">确认</el-button>
                    <el-button @click="cancel">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../../../styles/all';
#myMain{
    .approval_details_left{
        flex: 4;
        margin-right: 20px;
        .title{
            width: 92px;
            height: 30px;
            line-height: 20px;
            text-align: center;
            font-size: 18px;
            line-height: 30px;
        }
        .line{
            width: 100%;
            height: 5px;
            margin-bottom: 20px;
        }
        .lastRow{
            .el-form-item{
                width: 100% !important;
                ::v-deep.el-form-item__content{
                    width: 85%;
                }
            }
        }
        
    }
    .approval_details_right{
        flex: 1;
        position: relative;
        p{
            text-align: left;
            line-height: 35px;
        }
        .hh{
            padding: 2% 4%;
            border-radius: 5px;
        }
        .el-radio-group{
            margin: 2vh 0;text-align: left;
        }
        ::v-deep.el-timeline-item__timestamp.is-top{
            text-align: left;
        }
        // 线的颜色
        ::v-deep.el-timeline-item__tail {
            border-left: 2px solid #28567f;
        }
        // 圆点颜色
        ::v-deep.el-timeline-item__node {
            background-color: #28567f;
        }
        .btn{
            position: absolute;
            right: 4%;
            bottom: 2%;
        }
    }
}
</style>
<script>
import $ from 'jquery'
import { getSettleInApprovalInfoById, putSettleInInfoByApproval,getFirmApprovalInfoById ,putFirmInfoByApproval } from '@/api/enterprise_Manage'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            textarea: '',
            checkList: [],
            formData: {
            },
            rowId: this.$route.query.data.id,
            hid: this.$route.query.data.hid,
            userID: null,
            username:null,
            // 判断是信息审批还是退租审批
            IsRentRefund: this.$route.query.IsRentRefund,
        }
    },
    methods:{
        getUserInfo(){
            this.$store.dispatch('user/getInfo').then(res => {
                console.log('user info', res)
                this.userID = res.user.id
                this.username = res.user.nickname
            })
        },
        async init(){
            let result = []
            if(this.IsRentRefund){
                // 退租审批详情
                await getSettleInApprovalInfoById(this.rowId).then(res =>{
                    console.log('退租审批详情', res)
                    result =  JSON.parse(JSON.stringify(res.data[0]))
                })
            }else{
                // 企业信息审批详情
                await getFirmApprovalInfoById(this.rowId).then(res =>{
                    console.log('企业信息审批详情', res)
                    result =  JSON.parse(JSON.stringify(res))
                })
            }
            result['Mprice'] = result['rentType'] * 12
            if(result['decorateType'] == 1){
                result['decorateType'] = '已装修'
            }else{
                result['decorateType'] = '未装修'
            }
            if(result['elevator'] == 1){
                result['elevator'] = '电梯房'
            }else{
                result['elevator'] = '步梯房'
            }
            this.formData = result
        },
        // 企业信息审批
        submit(){
            if(this.checkList != ''){
                let result = {}
                if(this.checkList == '不同意'){
                    result['approveStatus'] = 2
                }else{
                    result['approveStatus'] = 1
                }
                result['id'] = this.rowId
                result['cid'] = this.userID
                result['opinion'] = this.textarea
                this.$confirm('是否审批该条信息？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    putFirmInfoByApproval(result).then(res => {
                        console.log('approval res', res)
                        this.$router.go(-1)
                    })
                })
                
            }else{
                this.$message.error('请选择同意或者不同意！');
            }
            
        },
        // 退租审批提交
        RentRefundSubmit(){
            if(this.checkList != ''){
                let result = {}
                if(this.checkList == '同意'){
                    result['leaseStatus'] = 2
                }else{
                    result['leaseStatus'] = 3
                }
                result['fid'] = this.formData.fid
                result['id'] = this.rowId
                result['cid'] = this.userID
                result['hid'] = this.hid
                result['opinion'] = this.textarea
                this.$confirm('是否审批该条信息？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    putSettleInInfoByApproval(result).then(res => {
                        console.log('approval res', res)
                        this.$router.go(-1)
                    })
                })
                
            }else{
                this.$message.error('请选择同意或者不同意！');
            }
        },
        cancel(){
          this.$router.go(-1)  
        }
    },
    created(){},
    mounted(){
        this.getUserInfo()
        this.init()
    },
}
</script>